<template>
  <div>
    <el-button @click="resetFilter">清除班级过滤器</el-button>
    <el-autocomplete
      class="inline-input"
      v-model="searchArea"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      :trigger-on-focus="false"
      @select="handleSelect"
    ></el-autocomplete>
    <el-button @click="createAndInvite" type="success"
      >创建会议并邀请成员</el-button
    >

    <el-table
      empty-text="---加载中---"
      ref="filterTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="selected" type="selection" />
      <el-table-column
        prop="class"
        label="班级"
        width="180"
        column-key="class"
        :filters="filterClass"
        :filter-method="filterHandler"
      />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="num" label="学号" sortable="true" />
    </el-table>
  </div>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "Metting",
  data() {
    return {
      multipleSelection: [],
      loading: true,
      fclass: [],
      searchArea: "",
      courseId: "1481",
      tableData: [],
      filterClass: [],
      map: {
        userId: "201928034202",
        subject: "接口测试2",
        idList: [],
      },
    };
  },

  methods: {
    querySearch(queryString, cb) {
      var names = [];
      this.tableData.forEach(element => {
        let obj={};
        obj.value=element.name;
        names.push(obj)
      });
      var results = queryString
        ? names.filter(this.createFilter(queryString))
        : names;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    //选出数组中符合条件的数据返回给names
    createFilter(queryString) {
      return (person) => {
        return (
          person.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //邀请
    createAndInvite() {
      this.multipleSelection.forEach((s) => {
        this.map.idList.push(s.num);
      });
      this.postRequest("/meeting/createAndInvite", this.map).then((res) => {
        Message.success(res.data.data.joinUrl);
        console.log(res.data.data);
      });
    },
    //从服务器获取班级数据
    getStudents() {
      this.getRequest("/canvas/students/" + this.courseId).then((resp) => {
        let obj = resp.data.data;
        let fclass = [];
        for (const key in obj) {
          let temp = {};
          temp["class"] = obj[key].stuClass;
          let tempClass = obj[key].stuClass;
          temp["name"] = obj[key].stuName;
          temp["num"] = obj[key].stuID;
          if (fclass.indexOf(tempClass) === -1) {
            fclass.push(tempClass);
          }
          this.tableData.push(temp);
        }
        console.log(this.tableData);
        this.fclass = fclass;
        this.fillFilterClass();
        this.loading = false;
      });
    },
    //出现的班级筛选出来
    fillFilterClass() {
      for (const key in this.fclass) {
        let temp1 = {};
        temp1["text"] = this.fclass[key];
        temp1["value"] = this.fclass[key];
        this.filterClass.push(temp1);
      }
    },
    resetFilter() {
      this.$refs.filterTable.clearFilter("class");
    },

    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
  mounted() {
    this.getStudents();
  },
};
</script>

<style scoped>
</style>
